<template>
  <div ref="print" v-if="visible">
    <a-drawer
      placement="right"
      :closable="false"
      :maskClosable="true"
      @close="onDrawerClose"
      :visible="visible"
      width="100%"
      :getContainer="false"
      :title="title"
      @newoldok="newoldok()"
    >
      <div id="print">
        <div style="width: 100%; overflow: hidden">
          <div class="details" style="overflow: hidden">
            <div class="Listdetails" v-for="(item, index) in subList" :key="index + item.Id" ref="Listdetails">
              <div :ref="'listQrcode'" id="qrcode" class="listQrcode"></div>
              <a-row class="rowprint">
                <a-col> <p></p> </a-col>
              </a-row>
              <a-row class="rowprint">
                <a-col> <span>名称</span>{{ item.Name }} </a-col>
              </a-row>
              <a-row class="rowprint">
                <a-col> <span>规格</span>{{ item.Spec }} </a-col>
              </a-row>
              <a-row class="rowprint">
                <a-col :span="12"> <span>材质</span>{{ item.Ofmaterial }} </a-col>
              </a-row>
              <a-row class="rowprint">
                <a-col :span="12"> <span>编号</span>{{ item.Code }} </a-col>
              </a-row>
              <a-row style="margin-top: 10px"></a-row>
              <div class="clear" style="clear：both"></div>
            </div>
          </div>
        </div>
      </div>
    </a-drawer>
    <div
      :style="{
        position: 'fixed',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 9999,
        title: ''
      }"
    >
      <a-button :style="{ marginRight: '8px' }" @click="onDrawerClose">取消</a-button>
      <a-button type="primary" @click="print">打印</a-button>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import moment from 'moment'
export default {
  data() {
    return {
      data: [],
      QrCode: '',
      loading: false,
      visible: false,
      queryParam: {},
      selectedRowKeys: [],
      subList: [],
      mid: '',
      MeName: '' //物品名称
    }
  },
  methods: {
    print() {
      let str = `* {
  font-family: 微软雅黑;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.barcode {
  float: left;
  display: block;
  width: 19.625rem;
  height: 6.25rem;
  margin-left: 2%;
}

/* .production-title{
	width: 55%;
	float: left;
	margin-left: 5%;
} */
.production-title li {
  width: 50%;
  line-height: 3.125rem;
  float: left;
  display: block;
  margin: 0 0px;
}
.production-title li label {
  margin-right: 20px;
}
.details {
  width: 100%;
  /* display: flex; */
  box-sizing: border-box;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  padding: 0 2%;
  margin-top: 2%;
}
.qrcode {
  width: 150px;
  height: 150px;
  float: left;
  margin-right: 25%;
  border: 1px solid #000;
}
.qrcode img {
  display: block;
  float: left;
}
.maiqrcode {
  width:150px;
  height: 150px;
  float: left;
  margin-right: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}
.Listdetails {
  float: left;
  margin-right: 1%;
  min-width: 50%;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #000;
  margin-bottom: 3%;
}
.detacode label {
  float: right;
  margin-right: 4%;
  margin-top: 10%;
  font-size: 18px;
}
.Listable {
  width: 98%;
  margin-left: 2%;
  float: left;
}
.Listable tr td {
  line-height: 3.125rem;
  font-size: 0.875rem;
}
.Print {
  position: fixed;
  bottom: 10%;
  right: 5%;
}
/* 444444444 */
#print td {
  line-height: 26px;
}
.listQrcode {
  width: 80px;
  height: 100px;
  position: absolute;
  top: 3%;
  right: 3%;
  /* border: 1px solid #000; */
}
.qr {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  height: 20px;
}
.detacode {
  margin-top: 1%;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 5px;
}
.rowprint {
  /* font-size: 18px; */
  font-size: 12px;
  box-sizing: border-box;
  line-height: 20px;
  padding: 0 1%;
}
.rowprint span {
  font-size: 14px;
  font-weight: bold;
}
#print ul li {
  /* font-size: 18px; */
}`
      const subOutputRankPrint = document.getElementById('print')
      const newstr = subOutputRankPrint.innerHTML
      const newWindow = window.open('打印窗口', '_blank')
      newWindow.document.write(newstr)
      const newStyle = newWindow.document.createElement('style')
      newStyle.innerHTML = str
      newWindow.document.head.appendChild(newStyle)
      newWindow.document.close()
      newWindow.print()
      newWindow.close()
      // const subOutputRankPrint = document.getElementById('print')
      // const newstr = subOutputRankPrint.innerHTML
      // document.body.innerHTML = newstr
      // window.print()
      // window.location.reload()
    },
    creatQrCode(qText, div) {
      var ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff'
        // correctLevel: QRCode.CorrectLevel.H
      })
      console.log(ar)
    },
    creatQrCodenew(qText, div) {
      var qrcode = new QRCode(div, {
        text: qText,
        width: 90,
        height: 90,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
    },
    DownloadQRcode() {
      this.subList.forEach((item, index) => {
        this.MeName = item.Name
        const myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas')
        const a = document.createElement('a')
        a.href = myCanvas[0].toDataURL('image/jpg')
        a.download = this.MeName + '.jpg'
        a.click()
        console.log(index)
      })
    },
    newoldok(e) {
      console.log(e)
    },
    async getDataList() {
      console.log(this.$refs['listQrcode'])
      console.log(this.subList)
      await this.$nextTick(() => {
        this.subList.forEach((item, index) => {
          this.creatQrCodenew(item.QrCode, this.$refs['listQrcode'][index])
          console.log(item.QrCode)
          console.log(index)
        })
      })
    },
    async openDrawer(mid, title) {
      this.title = title
      this.visible = true
      await this.$http.post('/PB/PB_Material/Selectid?ID=' + mid).then(res => {
        console.log(res.Data)
        this.subList = res.Data
        this.getDataList()
      })
    },
    onDrawerClose() {
      this.visible = false
      this.dataList = []
      this.datamain = []
      this.StartTime = ''
      this.EndTime = ''
    }
  }
}
</script>

<style scoped>
* {
  font-family: 微软雅黑;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}

.barcode {
  float: left;
  display: block;
  width: 19.625rem;
  height: 6.25rem;
  margin-left: 2%;
}

/* .production-title{
	width: 55%;
	float: left;
	margin-left: 5%;
} */
.production-title li {
  width: 50%;
  line-height: 3.125rem;
  float: left;
  display: block;
  margin: 0 0px;
}
.production-title li label {
  margin-right: 20px;
}
.details {
  width: 100%;
  /* display: flex; */
  box-sizing: border-box;
  /* flex-wrap: wrap;
  justify-content: space-between; */
  padding: 0 2%;
  margin-top: 2%;
}
.qrcode {
  width: 130px;
  height: 130px;
  float: left;
  margin-right: 25%;
  border: 1px solid #000;
}
.qrcode img {
  display: block;
  float: left;
}
.maiqrcode {
  width: 101px;
  height: 101px;
  float: left;
  margin-right: 10%;
  box-sizing: border-box;
  border: 1px solid #000;
}
.Listdetails {
  float: left;
  margin-right: 1%;
  width: 35%;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #000;
  margin-bottom: 3%;
}
.detacode label {
  float: right;
  margin-right: 4%;
  margin-top: 10%;
  font-size: 18px;
}
.Listable {
  width: 98%;
  margin-left: 2%;
  float: left;
}
.Listable tr td {
  line-height: 3.125rem;
  font-size: 0.875rem;
}
.Print {
  position: fixed;
  bottom: 10%;
  right: 5%;
}
/* 444444444 */
#print td {
  line-height: 26px;
}
.listQrcode {
  width: 80px;
  height: 100px;
  position: absolute;
  top: 3%;
  right: 3%;
  /* border: 1px solid #000; */
}
.qr {
  position: absolute;
  bottom: 0;
  left: 0;
  line-height: 20px;
  height: 20px;
}
.detacode {
  margin-top: 1%;
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 5px;
}
.rowprint {
  /* font-size: 18px; */
  font-size: 12px;
  box-sizing: border-box;
  line-height: 20px;
  padding: 0 4%;
}
.rowprint span {
  font-size: 14px;
  font-weight: bold;
}
#print ul li {
  /* font-size: 18px; */
}
</style>
